<script setup>
  import BorderChinese from '@/pages/chineseSurname/components/components/borderChinese.vue';
  import sheep from '@/sheep';
  import { onMounted, reactive } from 'vue';

  const emits = defineEmits(['setSelectCode']);

  const chineseSurname = reactive({
    list: [],
  });
  const props = defineProps({
    pageHeight: {
      type: String,
      default: '0px',
    },
  });

  const sq_image_path = sheep.$store('AI').sq_image_path;
  const zimuList = [
    {
      name: 'A',
    },
    {
      name: 'B',
    },
    {
      name: 'C',
    },
    {
      name: 'D',
    },
    {
      name: 'E',
    },
    {
      name: 'F',
    },
    {
      name: 'G',
    },
    {
      name: 'H',
    },
    {
      name: 'I',
    },
    {
      name: 'J',
    },
    {
      name: 'K',
    },
    {
      name: 'L',
    },
    {
      name: 'M',
    },
    {
      name: 'N',
    },
    {
      name: 'O',
    },
    {
      name: 'P',
    },
    {
      name: 'Q',
    },
    {
      name: 'R',
    },
    {
      name: 'S',
    },
    {
      name: 'T',
    },
    {
      name: 'U',
    },
    {
      name: 'V',
    },
    {
      name: 'W',
    },
    {
      name: 'X',
    },
    {
      name: 'Y',
    },
    {
      name: 'Z',
    },
    {
      name: '全部',
    },
  ];
  const selectInfo = reactive({
    selectCode: '全部',
  });

  onMounted(() => {
    // 获取中华姓氏
    getChineseSurname();
  });

  // 获取中华姓氏
  async function getChineseSurname(code = '') {
    const { data } = await sheep.$api.surname.getAllSurname({
      cid: 4,
      code: code,
    });
    chineseSurname.list = data.list;
  }

  function setSelectCode(code) {
    selectInfo.selectCode = code;
    if (code == '全部') {
      getChineseSurname();
    } else {
      getChineseSurname(code);
    }
  }
</script>

<template>
  <scroll-view :scroll-y="true" class="wh_750" :style="{
    height: `calc(100vh - ${pageHeight})`
  }">
    <view class="wh_750 flex flex-column align-center">
      <view class="hW_50"></view>
      <border-chinese :show-header="true" title="姓氏树">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="ss-m-t-100 ss-m-b-50">
                  <image class="wh_516 hW_734" :src="`${sq_image_path}/chineseSurname/surnameTree.png`"
                         @click="sheep.$router.go('/pages/chineseSurname/informationDetails',{id:108})"></image>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view class="hW_40"></view>
      <border-chinese :show-header="true" title="百家姓">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="worshipAncestorsAndSeekRoots_abbreviationsList wh_662 ss-m-t-100">
                  <view
                    class="worshipAncestorsAndSeekRoots_abbreviationsList_list flex flex-row align-center justify-center"
                    :style="index == zimuList.length - 1 ? 'grid-column-end: span 2;':''" :class="{
                      selectCodeClass:selectInfo.selectCode === item.name
                    }"
                    v-for="(item, index) in zimuList" :key="index" @click="setSelectCode(item.name)">
                    <text class="worshipAncestorsAndSeekRoots_abbreviationsList_list_text">{{ item.name }}</text>
                  </view>
                </view>
                <view class="ss-m-t-50 ss-m-b-50">
                  <view class="mrZhongWu_nameList wh_662">
                    <view class="mrZhongWu_nameList_list flex flex-row align-center justify-center"
                          v-for="(item, index) in chineseSurname.list" :key="index"
                          @click="sheep.$router.go('/pages/chineseSurname/details_firstAncestor',{
                            id:item.id
                          })">
                      <text class="mrZhongWu_nameList_list_text" :style="{
                        fontSize: item.surname.length > 2 ? '40rpx' : item.surname.length > 1 ? '50rpx' : '60rpx'
                      }">{{ item.surname }}
                      </text>
                    </view>
                  </view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view class="hW_100"></view>
    </view>
  </scroll-view>

</template>

<style scoped lang="scss">
  .worshipAncestorsAndSeekRoots_abbreviationsList {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-row-gap: 15rpx;
    grid-auto-flow: row dense;

    .worshipAncestorsAndSeekRoots_abbreviationsList_list {
      .worshipAncestorsAndSeekRoots_abbreviationsList_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #292929;
      }
    }
  }

  .mrZhongWu_nameList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 20rpx;

    .mrZhongWu_nameList_list {
      .mrZhongWu_nameList_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 60rpx;
        color: #292929;
      }
    }
  }

  .selectCodeClass {
    background: #FF4206;
    border-radius: 6rpx 6rpx 6rpx 6rpx;


    .worshipAncestorsAndSeekRoots_abbreviationsList_list_text {
      color: #FFFFFF !important;
    }
  }
</style>